<template>
  <view class="appointment-page">
    <!-- 房源信息 -->
    <view class="house-info">
      <view class="title">{{ houseInfo.title }}</view>
      <view class="price">
        <text class="amount">¥{{ houseInfo.price }}</text>
        <text class="unit">/月</text>
      </view>
      <view class="address">{{ houseInfo.address }}</view>
    </view>

    <!-- 预约表单 -->
    <view class="form-section">
      <view class="form-item">
        <view class="label">预约时间</view>
        <picker mode="date" :value="appointmentDate" @change="onDateChange">
          <view class="picker">{{ appointmentDate || '请选择日期' }}</view>
        </picker>
      </view>

      <view class="form-item">
        <view class="label">时间段</view>
        <picker mode="time" :value="appointmentTime" @change="onTimeChange">
          <view class="picker">{{ appointmentTime || '请选择时间' }}</view>
        </picker>
      </view>

      <view class="form-item">
        <view class="label">姓名</view>
        <input v-model="form.name" placeholder="请输入您的姓名" />
      </view>

      <view class="form-item">
        <view class="label">联系电话</view>
        <input v-model="form.phone" placeholder="请输入您的联系电话" type="number" />
      </view>

      <view class="form-item">
        <view class="label">备注</view>
        <textarea v-model="form.remark" placeholder="请输入备注信息" />
      </view>
    </view>

    <!-- 提交按钮 -->
    <view class="submit-btn" @click="onSubmit">提交预约</view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 房源信息
const houseInfo = ref({
  title: '阳光小区 2室1厅',
  price: 3500,
  address: '北京市朝阳区XX路XX号'
})

// 预约表单数据
const form = ref({
  name: '',
  phone: '',
  remark: ''
})

// 预约时间
const appointmentDate = ref('')
const appointmentTime = ref('')

// 日期选择
const onDateChange = (e) => {
  appointmentDate.value = e.detail.value
}

// 时间选择
const onTimeChange = (e) => {
  appointmentTime.value = e.detail.value
}

// 提交预约
const onSubmit = () => {
  if (!validateForm()) return

  uni.showLoading({ title: '提交中...' })
  
  // 模拟提交
  setTimeout(() => {
    uni.hideLoading()
    uni.showToast({ title: '预约成功' })
    uni.navigateBack()
  }, 1000)
}

// 表单验证
const validateForm = () => {
  if (!appointmentDate.value || !appointmentTime.value) {
    uni.showToast({ title: '请选择预约时间', icon: 'none' })
    return false
  }
  
  if (!form.value.name) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return false
  }
  
  if (!form.value.phone) {
    uni.showToast({ title: '请输入联系电话', icon: 'none' })
    return false
  }
  
  return true
}

onLoad((options) => {
  // 从路由参数中获取房源信息
  if (options.houseId) {
    // 这里可以调用接口获取房源详情
  }
})
</script>

<style lang="less">
@import '../../styles/uni.less';

.appointment-page {
  padding: @spacing-md;
}

.house-info {
  padding: @spacing-md;
  background-color: @bg-color;
  border-radius: @border-radius-md;
  
  .title {
    font-size: @font-size-lg;
    color: @text-color;
    margin-bottom: @spacing-sm;
  }
  
  .price {
    margin-bottom: @spacing-sm;
    
    .amount {
      font-size: 36rpx;
      color: @error-color;
      font-weight: bold;
    }
    
    .unit {
      font-size: @font-size-sm;
      color: @text-color-light;
      margin-left: @spacing-xs;
    }
  }
  
  .address {
    font-size: @font-size-md;
    color: @text-color-secondary;
  }
}

.form-section {
  margin-top: @spacing-lg;
  
  .form-item {
    margin-bottom: @spacing-lg;
    
    .label {
      font-size: @font-size-md;
      color: @text-color;
      margin-bottom: @spacing-sm;
    }
    
    input, textarea, .picker {
      padding: @spacing-sm;
      background-color: @bg-color-grey;
      border-radius: @border-radius-sm;
      font-size: @font-size-md;
    }
    
    textarea {
      height: 200rpx;
    }
  }
}

.submit-btn {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: @spacing-md;
  background-color: @primary-color;
  color: #fff;
  text-align: center;
  font-size: @font-size-lg;
}
</style> 